<template>
  <Header
    v-model="headerHeight"
    title=""
    :transparent="transparent"
    :is-box-height="isBoxHeight"
    :is-go-back="false"
    :is-box-shadow="false"
    v-model:opacity="opacity"
  >
    <template #customTitle>
      <view
        v-if="aiUserAccountBotVo"
        @click="handleSwitchAI"
        class="hb-ml-4 hb-flex hb-items-center"
        id="home-guide-step-1"
      >
        <TmImage
          class="hb-flex-shrink-0"
          :src="aiUserAccountBotVo.iconFileUrl"
          :width="56"
          :height="56"
          :round="2"
        />
        <text
          class="hb-ml-2 hb-text-[#333] hb-text-base text-overflow-1 hb-max-w-40"
          :style="{ color: `${getOpacityBol ? '#fff' : '#333'}` }"
        >
          {{ aiUserAccountBotVo.name }}
        </text>
        <view
          v-if="auditMessageCount > 0"
          class="hb-ml-2 hb-flex-shrink-0 hb-h-4 hb-rounded-full hb-bg-[#EA5E0E] hb-flex hb-items-center hb-justify-center hb-border-1 hb-border-solid hb-border-white"
        >
          <text class="hb-text-white hb-text-[20rpx] hb-px-1">
            {{ auditMessageCount > 99 ? '99+' : auditMessageCount }}
          </text>
        </view>
        <view
          class="hb-ml-2 hb-flex-shrink-0 hb-flex hb-items-center hb-justify-center hb-w-4 hb-h-4 hb-rounded-full"
          :style="{
            backgroundColor: `${getOpacityBol ? '#fff' : '#2878FF'}`,
            color: `${getOpacityBol ? '#2878FF' : '#fff'}`,
          }"
        >
          <text class="ali-icon hb-text-[20rpx]">&#xe771;</text>
        </view>
      </view>
      <view v-else @click="handleSwitchAI" class="hb-ml-4 hb-flex hb-items-center">
        <view
          class="hb-w-7 hb-h-7 hb-rounded-full hb-bg-primary hb-flex hb-items-center hb-justify-center"
          style="border: 1px solid rgba(255, 255, 255, 0.6)"
        >
          <text class="ali-icon hb-text-lg hb-text-white">&#xe727;</text>
        </view>
        <text
          class="hb-font-bold hb-ml-2 hb-text-[#333] hb-text-base"
          :style="{ color: `${getOpacityBol ? '#fff' : '#333'}` }"
        >
          切换专属AI助手
        </text>
      </view>
    </template>
  </Header>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import Header from '@/components/Header/index.vue';
  import { useUserStore } from '@/store/modules/user';
  import { GuideType, useGuideStore } from '@/store/modules/guide';

  const useUser = useUserStore();
  const { userInfo, auditMessageCount } = storeToRefs(useUser);

  const aiUserAccountBotVo = computed(() => userInfo.value?.aiUserAccountBotVo);

  const props = defineProps({
    opacity: propTypes.number.def(1),
    headerHeight: propTypes.number.def(0),
    transparent: String as PropType<'always' | 'auto' | 'none'>,
    isBoxHeight: propTypes.bool.def(false),
  });

  const emit = defineEmits(['update:headerHeight', 'update:opacity']);

  const opacity = computed({
    get() {
      return props.opacity;
    },
    set(value) {
      emit('update:opacity', value);
    },
  });

  const getOpacityBol = computed(() => {
    return props.opacity < 0.5;
  });

  const headerHeight = computed({
    get() {
      return props.headerHeight;
    },
    set(value) {
      emit('update:headerHeight', value);
    },
  });

  /** 切换AI助手 */
  const handleSwitchAI = () => {
    navigateTo({
      name: 'aiSwitch',
    });
  };

  /** 创建AI助手 */
  const handleCreateAI = () => {
    navigateTo({
      name: 'createAi',
    });
  };

  const ins = getCurrentInstance();
  useGuideStore().addGuide(
    0,
    {
      title: '切换智能助手',
      description: '可切换/创建其他AI智能助手',
      nodeInfo: {
        selector: '#home-guide-step-1',
        ins,
      },
    },
    GuideType.HOME,
  );
</script>

<style scoped></style>
